<template>
  <div class="box">
    <div id="tableBox">
      <el-button @click="fullDraw" v-has>全量抽取</el-button>
      <el-button @click="addVisible = true" v-has>新增</el-button>
      <el-button @click="singleDraw" v-has>增量抽取</el-button>
      <el-button @click="dialogVisible = true,open()" v-has>实时数据流</el-button>
    </div>
    <el-table :data="tableData" border fit stripe highlight-current-row>
      <el-table-column v-for="item in tableHead" :key="item.id" :label="item.label" :prop="item.title" align="center" />
    </el-table>
    <div class="current-box">
      <el-pagination :current-page="currentPage" :page-sizes="[10, 30, 50, 100]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
    <el-dialog title="新增" :close-on-click-modal="false" :visible.sync="addVisible" width="30%">
      <addData :close="close" />
    </el-dialog>
    <div id="zhezao" v-if="progressVisible">
      <div id="">
        <div style="color: red;">共计{{tableData.length}}条,抽取了{{tableData.length}}条</div>
        <progress-bar :options="options" :value="number" />
      </div>
    </div>
  </div>
</template>

<script>
  import addData from "./components/add.vue";
  export default {
    components: {
      addData,
    },
    created() {
      // this.fullDraw();
    },
    data() {
      return {
        tableHead: [{
            id: 1,
            label: "姓名",
            title: "name",
          },
          {
            id: 2,
            label: "年龄",
            title: "age",
          },
          {
            id: 3,
            label: "性别",
            title: "sex",
          },
          {
            id: 4,
            label: "联系方式",
            title: "phone",
          },
        ],
        tableData: [],
        dialogVisible: false,
        addVisible: false,
        currentPage: 1, // 当前页数
        totalCount: 100, // 数据总量
        pageSize: 10,
        options: {
          text: {
            color: '#FFFFFF',
            shadowEnable: true,
            shadowColor: '#000000',
            fontSize: 14,
            fontFamily: 'Helvetica',
            dynamicPosition: false,
            hideText: false
          },
          progress: {
            color: '#2dbd2d',
            backgroundColor: '#333333',
            inverted: false
          },
          layout: {
            height: 35,
            width: 140,
            verticalTextAlign: 61,
            horizontalTextAlign: 43,
            zeroOffset: 0,
            strokeWidth: 30,
            progressPadding: 0,
            type: 'line'
          }
        },
        progressVisible: false,
        number: 0
      };
    },
    methods: {
      fullDraw() {
        this.$server
          .getDcList({
            page: this.currentPage,
            limit: this.pageSize
          })
          .then((res) => {
            if (this.currentPage == 1) {
              this.$message({
                type: "success",
                message: "全量抽取成功",
              });
            }
            console.log(res);
            this.tableData = res.page.list;
            this.totalCount = res.page.totalCount;
          });
      },
      singleDraw() {
        this.currentPage = 1;
        this.$server.dcAddList({}).then((res) => {
          if (res.body.length) {
            this.$message({
              type: "success",
              message: "增量抽取成功",
            });
          } else {
            this.$message({
              type: "error",
              message: "没有新增数据",
            });
          }
          console.log(res);
          res.body.forEach((elem) => {
            this.tableData.push(elem);
          });
        });
      },
      handleClose(done) {
        this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => {});
      },
      close() {
        this.dialogVisible = false;
        this.addVisible = false;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.fullDraw();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.fullDraw();
      },
      open() {
        this.progressVisible = true
        let timer = setInterval(() => {
          if (this.number >= 99) {
            clearInterval(timer)
            this.$message({
              type: 'success',
              message: '执行成功'
            })
            setTimeout(() => {
              this.progressVisible = false
              this.number = 0
            }, 500)
          }
          this.number++
        }, 20)
      }
    },
  };
</script>

<style lang="scss" scoped>
  .box {
    padding: 20px;
  }

  #tableBox {
    margin-bottom: 20px;
  }

  .current-box {
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }

  #zhezao {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(127, 127, 127, 0.6);
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
